<template>
  <div>
    <!--
      搜索导航栏
    -->
    <div class="ci-global-nav">
      <!--      
      左侧导航
      -->
      <div class="left">
        <div class="logo">
          <router-link to="/">
            <img src="../assets/boger-ci-logo.png" alt="LOGO">
          </router-link>
        </div>
        <div class="title">
          <span>BOGER-CI</span>
        </div>
      </div>
      
      <!--      
      右侧导航
      -->
      <div class="right">
<!--        
搜索栏
-->
        <div class="search">
          <input type="text" id="search-text" placeholder="   请输入搜索内容">
          <button>搜索</button>
        </div>
        
<!--
用户头像
-->
        <div class="headImg">
          <img src="../assets/logo.png" alt="头像">
        </div>
<!--     
用户名称
-->
        <div class="userName">
          Default
        </div>
<!--        
下拉
-->
<!--        <div class="drop-down">-->
<!--          <select name="other" id="otherId">-->
<!--            <button>GitHub</button><button>GitHub</button>-->

<!--            <option value="github"><button>GitHub</button></option>-->
<!--            <option value="userDetail"><button>个人信息</button></option>-->
<!--          </select>-->
<!--        </div>-->
      </div>
    </div>


  </div>
</template>

<script>
export default {
  name: "Nav"
}
</script>

<style scoped lang="less">
.ci-global-nav {
  width: 99%;
  height: 100px;
  background-color: #0E6AC7;
  position: fixed;
  top: 5px;
  margin: 0 auto;

  .left {
    display: inline-block;
    position: absolute;
    line-height: 100px;
    left: 20px;

    .logo {
      display: inline-block;

      img {
        margin-top: -3px;
        width: 110px;
        height: 100px;
        vertical-align: middle;
      }
    }

    .title {
      display: inline-block;
      text-decoration: none;
      color: white !important;
      font: italic 1.5em Georgia, serif;

    }
  }

  .right {
    display: inline-block;
    position: absolute;
    line-height: 100px;

    right: 20px;
    .search{
      display: inline-block;
      margin-right: 50px;
      color: white;
      input {
        margin-right: 5px;
        height: 28px;
        width: 200px;
      }
      button{
        display: inline-block;
        height: 32px;
        width: 80px;
      }
    }

    .headImg {
      display: inline-block;
      margin-right: 5px;

      img {
        width: 35px;
        height: 40px;
        vertical-align: middle;
        border-radius: 30px;
      }
    }

    .userName {
      display: inline-block;
      margin-right: 30px;
      color: gainsboro;
    }

    .drop-down {
      display: inline-block;
    }


  }
}
</style>